<template>
  <div class="dashboard-container">
    <div class="layout-item">
      <div class="tit">
        <h3 class="txt">门店数据</h3>
        <div class="toolbar">
          <el-date-picker
            v-model="dateRange"
            class="range-picker-simple"
            type="daterange"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getData"
          />
        </div>
      </div>
      <div class="body">
        <div class="data-list">
          <span class="item"><b>访问人数</b><strong>{{ shopData.uv }}</strong></span>
          <span class="item"><b>展现人数</b><strong>{{ shopData.pv }}</strong></span>
          <span class="item"><b>订单数</b><strong>{{ shopData.ordernum }}</strong></span>
          <span class="item"><b>订单金额</b><strong>{{ shopData.ordermoney }}</strong></span>
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="body">
        <div class="link-btn-group">
          <a v-if="$store.getters.menu.find(item => item.menuid === '5')" href="javascript:;" class="link-btn red" @click="$router.push({ path: '/commodity/commodity/index', query: { showEdit: 2 } })">发布商品</a>
          <a v-if="$store.getters.menu.find(item => item.menuid === '5')" href="javascript:;" class="link-btn orange" @click="$router.push({ path: '/commodity/commodity/index', query: { showEdit: 1 } })">商品管理</a>
          <a v-if="$store.getters.menu.find(item => item.menuid === '7')" href="javascript:;" class="link-btn yellow" @click="$router.push('/order/order')">订单管理</a>
          <a v-if="$store.getters.menu.find(item => item.menuid === '4')" href="javascript:;" class="link-btn" @click="$router.push({ path: '/information/information', query: { showEdit: true } })">发布资讯</a>
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="tit">
        <h3 class="txt">最近销量</h3>
      </div>
      <div class="body">
        <div class="echart-wrapper">
          <v-chart
            ref="saleEchart"
            :options="recentSalesVolume"
            auto-resize
          />
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="tit">
        <h3 class="txt">用户来源</h3>
      </div>
      <div class="body">
        <div class="echart-wrapper">
          <v-chart
            ref="userSourceEchart"
            :options="userSource"
            auto-resize
          />
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="tit">
        <h3 class="txt">销量TOP10</h3>
      </div>
      <div class="body">
        <el-table
          stripe
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="商品标题"
          >
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click.prevent="showEditpage(scope.row)">{{ scope.row.name }}</el-button> -->
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column
            label="封面"
            width="80"
          >
            <!-- <template slot-scope="scope">
              <img class="tab_img" :src="scope.row.img" alt="">
            </template> -->
            <template slot-scope="scope">
              <el-popover
                placement="right"
                width="300"
                trigger="hover"
              >
                <img class="pre_tab_img" :src="scope.row.img" alt="">
                <span slot="reference"><img class="tab_img" :src="scope.row.img" alt=""></span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="seriesname"
            label="所属系列"
          />
          <el-table-column
            prop="ordernum"
            label="销量"
            show-overflow-tooltip
          />
          <el-table-column
            prop="orderyudingnum"
            label="预订量"
            show-overflow-tooltip
          />
          <el-table-column
            prop="orderweikuan"
            label="尾款率"
            show-overflow-tooltip
          />
          <!-- <el-table-column
            prop="shelftime"
            label="售后率"
            show-overflow-tooltip
          /> -->
          <el-table-column
            prop="address"
            label="操作"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.prevent="$router.push({ path: '/commodity/commodity/index', query: { showEdit: 2, commodityid: scope.row.commodityid } })">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script src="./home.js"></script>
<style lang="scss" scoped src="./home.scss"></style>
